import {useState,useEffect} from 'react';
import {useHistory,useLocation} from "react-router-dom"
import {useDispatch,useSelector} from "react-redux"
import { NavBar, Space, Toast, Radio } from "antd-mobile";
import { RightOutline } from "antd-mobile-icons";
import {SHOW_TABBER,HIDE_TABBER} from "../store/action-type/tabber"
import {CREATE_ORDER} from "../store/action-type/dingdan"
import "../MIUIcss/tijiao.scss"
import wx from "../image/Cart/wx.png"
import {filterImg} from "../tools"


function PlaceOrder() {
  const dispatch =useDispatch()
  const store = useSelector(r=>r.order)
  const imgs =
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F19%2F20210519231308_f1de3.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645766761&t=7f3a43e937e61cef357493097bdc300d ";

  const {go,push} =useHistory()
  const {state} =useLocation()
  const CartData =state.data
  console.log(CartData);
  const [value,setValue]=useState("one")
  useEffect(()=>{
      dispatch({ type: HIDE_TABBER });
  },[])
  return (
    <div className="palceOrder">
      <NavBar
        className="nav"
        children={"结算"}
        onBack={() => {
          dispatch({ type: SHOW_TABBER });
          go(-1);
        }}
      />
      <div className="tjdetile">
        <div className="address">
          <h3>张三 112344456666</h3>
          <p>河南省郑州市，高新区xxxx河南省郑州市河南省</p>
          <span className="jiantou">
            <RightOutline />
          </span>
        </div>
        <div className="palyMethod">
          <ul>
            <Radio.Group
              value={value}
              onChange={(l) => {
                setValue(l);
              }}
            >
              <li>
                <span>xx支付</span>
                <span>享受xx活动</span>
                <Radio value="one" className="palyCk" />
              </li>
              <li>
                <span>xx支付</span>
                <span>享受xx活动</span>
                <Radio value="two" className="palyCk" />
              </li>

              <li>
                <span>xx支付</span>
                <span>享受xx活动</span>
                <Radio value="therr" className="palyCk" />
              </li>
              <li>
                <span>xx支付</span>
                <span>享受xx活动</span>
                <Radio value="fuor" className="palyCk" />
              </li>
              <li>
                <span>xx支付</span>
                <span>享受xx活动</span>
                <Radio value="five" className="palyCk" />
              </li>
            </Radio.Group>
          </ul>
        </div>
        <p className="massage">*查看活动规则</p>
        <div className="xuanxiang">
          <a href="">
            配送
            <div>
              <span>不限配送时间</span>
              <RightOutline />
            </div>
          </a>
          <a href="">
            发票
            <div>
              <span></span>
              <RightOutline />
            </div>
          </a>
          <a href="">
            优惠券
            <div>
              <span>无可用</span>
              <RightOutline />
            </div>
          </a>
        </div>
        <ul className="products">
          {CartData.map((item) => (
            <li key={item.id}>
              <img src={filterImg(item.product.coverImage)} alt="" />
              <p>
                {item.product.name.length > 20
                  ? item.product.name.substr(0, 20) + "..."
                  : item.product.name}
              </p>
              <span>x{item.amount}</span>
              <div>
                {(item.amount * 100 * (item.product.price * 100)) / 10000}元
              </div>
            </li>
          ))}
        </ul>
      </div>
      <div className="bottom">
        <p>河南省郑州市，高新区xxxx河南省郑州市河南省</p>
        <div className="yfjine">
          <span>
            应付金额&nbsp;&nbsp;&nbsp;
            {CartData.reduce(
              (a, b) => a + (b.amount * 100 * (b.product.price * 100)) / 10000,
              0
            )}
            元
          </span>
          <div className="topaly"
          onClick={()=>{
            let now =Date.now()
            dispatch({
              type: CREATE_ORDER,
              index: now,
              money: CartData.reduce(
                (a, b) =>
                  a + (b.amount * 100 * (b.product.price * 100)) / 10000,
                0
              ),
              data: CartData,
            });
            push({
              pathname: "/cart/play",
              state:{id:now}
            });
          }}
          >去付钱</div>
        </div>
      </div>
    </div>
  );
}

export default PlaceOrder;
